<template>
  <a-card :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="redo" @click="getDataList()">刷新</a-button>
      <a-radio-group
        v-model="queryParam[0].keyword"
        style="margin-left: 8px"
        :default-value="null"
        button-style="solid"
        @change="getDataList()"
      >
        <a-radio-button :value="null"> 全部 </a-radio-button>
        <a-radio-button :value="1"> 客户转正 </a-radio-button>
        <a-radio-button :value="2"> 客户申请 </a-radio-button>
        <a-radio-button :value="3"> 客户备案 </a-radio-button>
      </a-radio-group>
    </div>

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="10">
          <a-col :md="4" :sm="24">
            <a-form-item>
              <a-input @keydown="inputKeyDown" v-model="queryParam[1].keyword" placeholder="客户名称" />
            </a-form-item>
          </a-col>

          <a-col :md="6" :sm="24">
            <a-button
              type="primary"
              @click="
                () => {
                  this.pagination.current = 1
                  this.getDataList()
                }
              "
              >查询</a-button
            >
            <a-button style="margin-left: 8px" @click="Reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="table"
      :scroll="{ y: 530 }"
      :columns="columns"
      :rowKey="(row, index) => index"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :bordered="true"
      size="small"
    >
      <template slot="ApprovalStatus" slot-scope="text, record">
        <a-tag v-if="record.ApprovalStatus == 0" color="blue">待审批</a-tag>
        <a-tag v-if="record.ApprovalStatus === 1" color="green">已通过</a-tag>
        <a-tag v-if="record.ApprovalStatus == 2" color="red">已驳回</a-tag>
      </template>

      <template slot="Type" slot-scope="text, record">
        <a-tag v-if="record.Type == 1" color="green">客户转正</a-tag>
        <a-tag v-if="record.Type == 2" color="cyan">客户申请</a-tag>
        <a-tag v-if="record.Type == 3" color="orange">客户备案</a-tag>
      </template>

      <template slot="action" slot-scope="text, record">
        <span v-if="record.ApprovalStatus == '0' && record.Type == 2">
          <!-- <a v-if="hasPerm('Cust_CustomerApply.Pass')" @click="apply(true, record)">通过</a>
          <a-divider type="vertical" />
          <a v-if="hasPerm('Cust_CustomerApply.overrule')" @click="apply(false, record)">驳回</a> -->
               <a v-if="hasPerm('Cust_CustomerApply.Pass')" @click="handleApply(record)">审核</a>
        </span>
        <span v-if="record.ApprovalStatus == '0' && record.Type == 1">
          <a v-if="hasPerm('Cust_CustomerApply.Pass')" @click="handleApply(record)">审核</a>
        </span>
        <span v-if="record.ApprovalStatus == '0' && record.Type == 3">
          <a @click="handleApply(record)">审核</a>
        </span>
      </template>
    </a-table>
    <Detailsfrom ref="Detailsfrom" :parentObj="this" />
  </a-card>
</template>

<script>
import Detailsfrom from '@/views/CustomerManagement/Customer/Details.vue'
import moment from 'moment'

const columns = [
  {
    title: '日期',
    dataIndex: 'CreateTime',
    align: 'left',
    width: '100px',
    customRender: (value) => {
      return value.substring(0, 10)
    },
  },
  // { title: '客户编号', dataIndex: 'cCusCode', align: 'left', width: '120px' },
  { title: '客户名称', dataIndex: 'CustomerName', align: 'left', width: '150px' },

  { title: '申请人', dataIndex: 'SalesmanName', align: 'left', width: '120px' },
  {
    title: '审批状态',
    dataIndex: 'ApprovalStatus',
    align: 'left',
    scopedSlots: { customRender: 'ApprovalStatus' },
    width: '80px',
    align: 'center',
  },
  {
    title: '业务类型',
    dataIndex: 'Type',
    align: 'left',
    width: '80px',
    align: 'center',
    scopedSlots: { customRender: 'Type' },
  },
  { title: '操作', dataIndex: 'action', align: 'left', scopedSlots: { customRender: 'action' }, width: '70px' },
]

export default {
  components: {
    Detailsfrom,
  },
  mounted() {
    this.getDataList()
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      data: [],
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true,
      },
      filters: {},
      entity: {},
      sorter: { field: 'CreateTime', order: 'desc' },
      queryParam: [{ condition: 'Type', keyword: null }, { condition: 'CustomerName' }],
      loading: false,
      columns,
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  methods: {
    handleApply(record) {
      this.$refs.Detailsfrom.openForm(record.CustomerId, '审核', record)
    },
    inputKeyDown(e) {
      if (e.keyCode === 13) {
        if (!this.queryParam[1].keyword) return this.$message.error('请输入查询条件')

        this.getDataList()
      }
    },
    Reset() {
      this.queryParam = [{ condition: 'Type', keyword: null }, { condition: 'CustomerName' }]
    },
    apply(bl, record) {
      let title = ''
      if (record.Type == '1') {
        title = `确认${bl ? '通过' : '驳回'}客户转正吗?`
      }
      if (record.Type == '2') {
        title = `确认${bl ? '通过' : '驳回'}客户申请吗?`
      } 
      if (record.Type == '3') {
        title = `确认${bl ? '通过' : '驳回'}客户备案吗?`
      }
      console.log(record.Type);
      this.$confirm({
        title,
        onOk: () => {
          record.ApprovalStatus = bl ? 1 : 2
          this.$http.post('/CustomerManagement/Cust_CustomerApply/ApprovalAction', record).then((res) => {
            if (res.Success) {
              this.$message.success('操作成功')
              this.getDataList()
            } else {
              this.$message.error(res.Msg)
            }
          })
        },
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },

    getDataList() {
      this.selectedRowKeys = []

      this.loading = true
      this.$http
        .post('/CustomerManagement/Cust_CustomerApply/GetDataListByMoreCondition', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters,
        })
        .then((resJson) => {
          this.loading = false
          if (resJson.Success) {
            this.data = resJson.Data
            const pagination = { ...this.pagination }
            pagination.total = resJson.Total
            this.pagination = pagination
          }
        })
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
    handleDelete(ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk() {},
      })
    },
    timeFormat(val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD HH:mm')
    },
  },
}
</script>
